<template>
  <div>
    <p class="q1">登录账户</p>
    <p class="q2">虾米-严选商城欢迎你</p>
    <van-form>
      <van-field
        class="inp"
        v-model="username"
        placeholder="手机号码"
        :rules="[{ required: true, message: '请填写手机号码' }]"
      />
      <van-field
        class="inp"
        v-model="password"
        type="password"
        placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
      <div style="margin: 16px">
        <van-button
          block
          type="info"
          class="login"
          @click="login"
          native-type="submit"
          >登录</van-button
        >
      </div>
    </van-form>
    <p class="q3 q4">忘记密码</p>
    <p class="q3 q5">还没有注册？<span @click="zhu">立即注册</span></p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      username: "",
      password: "",
    };
  },
  methods: {
    // 登录
    login() {
      this.$API.login(this.username, this.password).then((res) => {
        if (res.data.code == 500) {
          alert("登陆失败");
        } else {
          if (this.user === "" || this.password === "") {
            alert("用户名或者密码不能为空");
            return;
          }
          alert("登录成功");
          localStorage.setItem("token", res.data.data.token);
          this.$router.push({ path: "/ge" });
        }
      });
    },
    zhu() {
      this.$router.push({ path: "/zhu" });
    },
  },
};
</script>
<style  scoped>
.q1 {
  font-size: 26px;
  padding-left: 30px;
}
.q2 {
  font-size: 16px;
  padding-left: 30px;
}
.inp {
  width: 260px;
  border: 1px solid #f5f5f5;
  background: #f5f5f5;
  margin-left: 30px;
  margin-top: 20px;
}
.login {
  width: 180px;
  margin-left: 50px;
  margin-top: 20px;
  outline: none;
  border: none;
  border-radius: 5px;
  background: linear-gradient(135deg, #e570e7 0%, #79f1fc 100%);
}
.q3 {
  width: 200px;
  margin-left: 50px;
  text-align: center;
}
.q4 {
  font-size: 10px;
}
.q5 {
  color: #549ff9;
}
</style>